<template>
  <van-tabs v-model="active" class="order" @change="getOrderList(active)">
    <van-tab title="待出单" class="order-list">
      <van-list :finished="finished">
        <van-cell-group class="order-list-item" v-for ="(item,index) in insurance" :key="index">
          <img class="order-list-item-img" src="./../../../assets/images/daihuikuan@2x.png"/>
          <van-cell title="订单号" :value="item.orderId" />
          <van-cell title="产品方案" :value="item.productName" />
          <van-cell title="被保人姓名" :value="item.insuredName" />
          <van-cell title="证件类型" value="身份证" />
          <van-cell title="证件号码" :value="item.insuredIdNo" />
          <van-cell title="手机号码" :value="item.insuredMobile" />
          <van-cell title="电子邮箱" :value="item.insuredEmail" />
          <van-cell title="投保开始时间" :value="item.insurStartDate" />
          <van-cell title="投保截至时间" :value="item.insurEndDate" />
          <van-cell title="投保时间" :value="item.insurDate" />
          <van-cell title="保费" :value="item.premium" />
        </van-cell-group>
      </van-list>
    </van-tab>
    <van-tab title="出单成功" class="order-list">
      <van-cell-group class="order-list-item" v-for ="(item,index) in insurance" :key="index">
        <img class="order-list-item-img" src="./../../../assets/images/success@2x.png"/>
        <van-cell title="订单号" :value="item.orderId" />
        <van-cell title="产品方案" :value="item.productName" />
        <van-cell title="被保人姓名" :value="item.insuredName" />
        <van-cell title="证件类型" value="身份证" />
        <van-cell title="证件号码" :value="item.insuredIdNo" />
        <van-cell title="手机号码" :value="item.insuredMobile" />
        <van-cell title="电子邮箱" :value="item.insuredEmail" />
        <van-cell title="投保开始时间" :value="item.insurStartDate" />
        <van-cell title="投保截至时间" :value="item.insurEndDate" />
        <van-cell title="投保时间" :value="item.insurDate" />
        <van-cell title="保费" :value="item.premium" />
        <van-cell class="success-btn">
          <span class="span-btn" @click="sendTo(item, 'policy')">发送保单至邮箱</span>
          <span class="span-btn" @click="sendTo(item, 'invoice')">发送发票至邮箱</span>
        </van-cell>
      </van-cell-group>
    </van-tab>
    <van-dialog
      title= "提示"
      v-model="showDialog"
      :show-cancel-button = "showCancel"
      :before-close="beforeClose"
    >
      <p>{{tips}}</p>
    </van-dialog>
    <van-tab title="出单失败">
      <van-cell-group class="order-list-item" v-for ="(item,index) in insurance" :key="index">
        <img class="order-list-item-img" src="./../../../assets/images/fail@2x.png"/>
        <van-cell title="订单号" :value="item.orderId" />
        <van-cell title="产品方案" :value="item.productName" />
        <van-cell title="被保人姓名" :value="item.insuredName" />
        <van-cell title="证件类型" value="身份证" />
        <van-cell title="证件号码" :value="item.insuredIdNo" />
        <van-cell title="手机号码" :value="item.insuredMobile" />
        <van-cell title="电子邮箱" :value="item.insuredEmail" />
        <van-cell title="投保开始时间" :value="item.insurStartDate" />
        <van-cell title="投保截至时间" :value="item.insurEndDate" />
        <van-cell title="投保时间" :value="item.insurDate" />
        <van-cell title="保费" :value="item.premium" />
        <van-cell title="失败原因" :value="item.premium" />
        <div class="success-btn">
          <span class="span-btn" @click="sendTo(item.id, 'update')">修改信息</span>
        </div>
      </van-cell-group>
    </van-tab>
    <div class="noData" v-show="insurance.length === 0">
      <img src="./../../../assets/images/shenhe@2x.png"/>
      <div class="tips">提示</div>
      <div class="tips">没有数据</div>
    </div>
  </van-tabs>
</template>
<script>
import {getOrderList, sendInvoice, sendPolicy} from './../../../api/index'
export default {
  name: 'sun-insurance-order',
  data () {
    return {
      active: 0,
      insurance: [],
      showDialog: false,
      tips: '',
      activeType: '',
      sendInfo: [],
      showCancel: true,
      finished: true
    }
  },
  created () {
    this.getOrderList(0)
  },
  methods: {
    getOrderList (status) {
      const account = this.$store.state.permission.user.account
      getOrderList({orderStatus: status, account: account}).then(res => {
        if (res.data.code === 200) {
          this.insurance = res.data.data
        }
      })
    },
    sendTo (data, type) {
      this.activeType = type
      this.showDialog = true
      this.showCancel = true
      if (type === 'update') {
        this.$router.push({name: 'orderDetail', params: {orderId: data}})
      } else if (type === 'policy') {
        this.tips = '您即将发送电子保单至邮箱地址为：' + data.insuredEmail + '的电子邮箱'
        this.sendInfo = data
      } else if (type === 'invoice') {
        this.tips = '您即将发送电子发票至邮箱地址为：' + data.insuredEmail + '的电子邮箱'
        this.sendInfo = data
      }
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        this.showCancel = false
        this.tips = '正在发送....'
        if (this.activeType === 'policy') {
          sendPolicy({policyNo: this.sendInfo.policyNo}).then(res => {
            this.tips = res.data.msg
            if (res.data.code === 200) {
              setTimeout(done, 1500)
            } else {
              setTimeout(done, 3500)
            }
            this.$store.commit('toggleLoading', false)
          }).catch(() => {
            this.tips = '服务器正忙，请稍后再试...'
            setTimeout(done, 2000)
            this.$store.commit('toggleLoading', false)
          })
        } else if (this.activeType === 'invoice') {
          sendInvoice({policyNo: this.sendInfo.policyNo}).then(res => {
            this.tips = res.data.msg
            if (res.data.code === 200) {
              setTimeout(done, 1500)
            } else {
              setTimeout(done, 3500)
            }
            this.$store.commit('toggleLoading', false)
          }).catch(() => {
            this.tips = '服务器正忙，请稍后再试...'
            setTimeout(done, 2000)
            this.$store.commit('toggleLoading', false)
          })
        }
      } else {
        done()
        this.showDialog = false
      }
    }
  }
}
</script>
<style lang="stylus">

.van-tabs__line{
  background #11b190
}
.van-tabs--line .van-tabs__wrap{
  height 100px !important
  line-height 100px
  .van-tab--active{
    color #11B190
  }
}
.order{
  position fixed !important
  padding 90px 30px 30px 36px !important
  width calc( 100% - 65px )
  height calc( 100% - 320px )
  overflow auto
  -webkit-overflow-scrolling:touch
  .loading{
    position fixed
    z-index 0
    top 40%
    left 40%
    right 40%
    bottom 40%
    width 20%
    height 20%
  }
  .van-tab{
    height 100px
    line-height 100px
    font-size 36px
  }
  .van-tabs__content{
    height 100%
    .order-list-item{
      margin-top 32px
      border-radius 12px
      padding 12px
      position relative
      .order-list-item-img{
        position absolute
        top 5px
        right 5px
        width 230px
        z-index 2
      }
      .van-cell{
        height 96px
        line-height 1.1
        vertical-align middle
        // padding-top 24px
      }
      .van-cell__title{
        width 210px
        font-size:36px;
        text-align left
        vertical-align middle
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
      .van-cell__value{
        font-size:36px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        overflow initial
      }
      .success-btn{
        height 108px
        line-height 108px
        .span-btn{
          font-size:36px !important
          font-family:PingFang-SC-Medium !important
          font-weight:500;
          color:rgba(17,177,144,1) !important
          &:nth-child(2){
            margin-left 320px
          }
        }
      }
    }
  }
  .van-dialog{
    font-size 32px
  }
  .van-button--large{
    height 80px
    line-height 80px
    font-size 28px
  }
  .van-loading{
    width 32px !important
    height 32px !important
  }
  .van-loading__circular circle{
    stroke: #11B190;
  }
  .noData{
    padding 20px 30px
    height 100%
    margin-top 36%
    .tips{
      margin-top 30px
      font-size:42px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(153,153,153,1);
    }
  }
}
</style>
